<template>
    <div>
        <vxe-grid
            ref="diyTable"
            show-overflow
            row-key
            align="center"
            :height="400"
            :data="dataSource"
            :columns="fixedColumns"
        />
        <div class="am-margin-top-sm am-text-right">
            <qt-button button-name="保存" @click="save" />
            <qt-button button-name="重置" @click="reset" />
        </div>
    </div>
</template>

<script>
import { operatorList } from '../qtHeaderCell/operatorList';
import Sortable from 'sortablejs';

export default {
    name: 'tableDiy',

    data() {
        return {
            columns: [
                { field: 'title', title: '列名', width: '200' },
                { field: 'show', title: '是否显示' },
                { field: 'width', title: '列宽', width: '200' },
                { field: 'query', title: '查询方式', width: '140' },
                { field: 'top', title: '置顶' },
                { field: 'sort', title: '排序' }
            ],
            list: [],
            sortable: {}
        };
    },

    inject: ['$list'],

    computed: {
        fixedColumns() {
            const columns = this._.cloneDeep(this.columns);

            return columns.map(item => {
                item.slots = {};
                switch (item.field) {
                    case 'show':
                        Object.assign(item.slots, {
                            default: ({ row }) => {
                                return [<el-switch v-model={row.show} active-color="#13ce66" inactive-color="#ff4949" />];
                            }
                        });
                        break;
                    case 'width':
                        Object.assign(item.slots, {
                            default: ({ row }) => {
                                return [<el-input-number size="mini" controls-position="right" v-model={row.width}></el-input-number>];
                            }
                        });
                        break;
                    case 'query':
                        Object.assign(item.slots, {
                            default: ({ row }) => {
                                return [
                                    <el-select
                                        disabled={row.headerFilter === 'selectFilter' || row.headerFilter === 'timeFilter' ? true : false}
                                        v-model={row.query}
                                        placeholder="默认"
                                        size="mini"
                                    >
                                        {operatorList.map((item, index) => {
                                            return <el-option key={index} label={item.label} value={item.value}></el-option>;
                                        })}
                                    </el-select>
                                ];
                            }
                        });
                        break;
                    case 'sort':
                        Object.assign(item.slots, {
                            default: () => {
                                return [<i class="el-icon-rank am-text-lg am-cursor"></i>];
                            }
                        });
                        break;
                    case 'top':
                        Object.assign(item.slots, {
                            default: ({ rowIndex }) => {
                                return [
                                    <i
                                        class="el-icon-upload2 am-text-lg am-cursor"
                                        onClick={() => {
                                            this.sortTop(rowIndex);
                                        }}
                                    ></i>
                                ];
                            }
                        });
                        break;
                }
                return item;
            });
        },

        dataSource() {
            return this.list.map(item => {
                return item;
            });
        }
    },

    beforeDestroy() {
        if (this.sortable) {
            this.sortable.destroy();
        }
    },

    created() {
        this.reset();
        this.sortDrop();

        this.list = this.list
            .filter(item => {
                return item.field;
            })
            .map(item => {
                this.$set(item, 'show', true);

                if (item.headerFilter === 'selectFilter' || item.headerFilter === 'timeFilter') {
                    this.$set(item, 'query', '默认');
                } else {
                    this.$set(item, 'query', '=');
                }

                return item;
            });
    },

    methods: {
        save() {
            console.log(this.dataSource);
        },

        reset() {
            this.list = this._.cloneDeep(this.$list.$refs.table.columns);
        },

        sortDrop() {
            this.$nextTick(() => {
                const diyTable = this.$refs.diyTable;

                this.sortable = Sortable.create(diyTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
                    handle: '.el-icon-rank',
                    onEnd: ({ newIndex, oldIndex }) => {
                        this.dataSource.splice(newIndex, 0, this.dataSource.splice(oldIndex, 1)[0]);

                        const tmpArray = this.dataSource.slice(0);

                        this.list = [];
                        this.$nextTick(() => {
                            this.list = tmpArray;
                        });
                    }
                });
            });
        },

        sortTop(rowIndex) {
            const item = this.dataSource[rowIndex];

            this.dataSource.splice(rowIndex, 1);
            this.dataSource.unshift(item);
            this.list = this.dataSource;
        }
    }
};
</script>
